<template>
	<view>
		<uni-nav-bar statusBar title="我的" :border='false' color="#000" fixed :backgroundColor='backgroundColor'>
			<block slot="left">
				<image class="logo1" src="/static/common/logo1.png" mode=""></image>
			</block>
			<block slot="right">
				<image class="logo1" src="/static/common/logo2.png" mode=""></image>
			</block>
		</uni-nav-bar>
		<image class="BGImage" :src="getImageUrl('/static/common/BG.png')" mode=""></image>
		<view class="" style="position: relative;z-index: 2;">
		<view class="topView">
			<view class="infoView flex-row-space-between">
				<view class="flex-row-space-between">
					<image class="head" src="/static/my/head.png" mode=""></image>
					<view class="">
						<view class="name">
							用户名称
						</view>
						<view class="phone">
							15588888888
						</view>
					</view>
				</view>
				<view @click="toUrl('settings')" class="flex-column-center">
					<image class="sz" src="/static/my/1.png" mode=""></image>
					<view class="szTitle">
						设置
					</view>
				</view>
				
			</view>
			<view class="numView">
				<view class="flex-row-flex-start">
					<view @click="itemClick(item)" style="width: 33.33%;" class="flex-column-center" v-for="(item,index) in numList" :key="index">
						<view class="value">
							{{item.value}}
						</view>
						<view class="title">
							{{item.name}}
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<view class="itemView">
			<view class="left">
				订单中心
			</view>
			<view class="flex-row-flex-start">
				<view @click="itemClick(item)" style="width: 20%;" class="flex-column-center" v-for="(item,index) in list" :key="index">
					<image class="icon" :src="item.icon" mode=""></image>
					<view class="title1">
						{{item.title}}
					</view>
				</view>
			</view>
		
		</view>
		
		<view class="itemView">
			<view class="left">
				常用功能
			</view>
			<view class="flex-row-flex-start">
				<view @click="itemClick(item)" style="width: 20%;" class="flex-column-center" v-for="(item,index) in list2" :key="index">
					<image class="icon" :src="item.icon" mode=""></image>
					<view class="title1">
						{{item.title}}
					</view>
				</view>
			</view>
		
		</view>
		<view class="itemView">
			<view class="left">
				其他工具
			</view>
			<view class="flex-row-flex-start flex-wrap">
				<view @click="itemClick(item)" style="width: 25%;" class="flex-column-center" v-for="(item,index) in list1" :key="index">
					<image class="icon" :src="item.icon" mode=""></image>
					<view class="title1">
						{{item.title}}
					</view>
				</view>
			</view>
		
		</view>

	</view>

	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		profile,
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {

				numList: [{
						name: '小金库(克)',
						value: '0',
						url:"vault",
					},
					{
						name: '钱包余额(元)',
						value: '0',
						url:"vault1",
					},
					{
						name: '押金(元)',
						value: '0',
						url:"vault2",
					},
				
				],
				
				list: [{
						title: '卖金定单',
						icon: '/static/my/1.png',
						url:'order?type=0'
					},
					{
						title: '买金定单',
						icon: '/static/my/2.png',
						url:'order?type=1'
					},
					{
						title: '延结定单',
						icon: '/static/my/3.png',
						url:'order?type=2'
					},
					{
						title: '提金定单',
						icon: '/static/my/4.png',
						url:'order?type=3'
					},
					{
						title: '物料定单',
						icon: '/static/my/5.png',
						url:'order?type=4'
					}
				],
				list2: [{
						title: '快递',
						icon: '/static/my/1.png',
						url:'my1?type=3'
					},
					{
						title: '保单',
						icon: '/static/my/2.png',
						url:'my1?type=3'
					},
					
					
				],
				list1: [{
						title: '业务说明',
						icon: '/static/my/11.png',
						url:'my1?type=1'
					},
					{
						title: '回收标准',
						icon: '/static/my/12.png',
						url:'my1?type=2'
					},
					{
						title: '常见问题',
						icon: '/static/my/13.png',
						url:''
					},
					{
						title: '关于我们',
						icon: '/static/my/14.png',
						url:'my1?type=3'
					},
					{
						title: '银行账户',
						icon: '/static/my/15.png',
						url:''
					},
					{
							title: '联系客服',
							icon: '/static/my/16.png',
							url:''
						},
						{
							title: '企业公告',
							icon: '/static/my/17.png',
							url:''
						},
						{
							title: '企业认证',
							icon: '/static/my/18.png',
							url:''
						},
						// {
						// 	title: '用户协议',
						// 	icon: '/static/my/19.png',
						// 	url:''
						// },
					
				],
				userinfo: {},
			
				title: "",
				backgroundColor: 'ffffff00',
		
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
			// this.userinfo=uni.getStorageSync('userinfo')
			// 			this.profile()
		},
		onLoad(e) {

			// this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		methods: {
			itemClick(item){
				if(item.url){
					this.toUrl(item.url)
				}else{
					this.showToast('请先实名')
				}
			},
			roleClick() {
				if (this.userinfo.group_id == 3 || this.userinfo.group_id == 0) {
					return
				}
				uni.navigateTo({
					url: '/pages/index/setRole'
				})
			},
			profile() {

				var data = {

				}
				profile(data).then(res => {

					uni.setStorageSync('userinfo', res.data)
					this.userinfo = uni.getStorageSync('userinfo')


				})
			},
			buttonClick() {
				uni.removeStorageSync('token')
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			loadData() {

				var data = {
					id: this.id
				}
				forum_list(data).then(res => {
					this.list = res.data.data
				})
			},


		}
	}
</script>

<style lang="scss">
	.infoView {
		margin: 40rpx;
		margin-top: 60rpx;
		margin-bottom: 20rpx;
	}

	.head {
		margin-right: 20rpx;
		width: 104rpx;
		height: 104rpx;
		border-radius: 8rpx;
	}

	.name {
		font-weight: bold;
		font-size: 36rpx;
		color: #4E4E49;
	}

	.phone {
		margin-top: 4rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #4E4E49;
	}

	.numView {
		height: 260rpx;

		// background: linear-gradient(180deg, #FEDDDA 0%, #F7F8FA 100%);
		border-radius: 20rpx 20rpx 0rpx 0rpx;

	}

	.value {
		margin-top: 30rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
	}

	.title {
		margin-top: 6rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
	}

	.itemView {
		padding-top: 24rpx;
		padding-bottom: 30rpx;
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.left {
		margin-left: 24rpx;
		// margin-top: 24rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.icon{
		margin-top: 20rpx;
		width: 48rpx;
		height: 48rpx;
	}
	.title1{
		margin-top: 6rpx;
		
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
	}
	.sz{
		width: 37rpx;
		height: 37rpx;
	}
	.szTitle{
		font-weight: normal;
		font-size: 24rpx;
		color: #111110;
	}
</style>